<template>
  <div class="app-container">
    <Find :OriginalFilter="{ static: true }" :formList="formList" @Launchform="Launchform" @findClicked="findClicked" />
    <el-card style="margin-top: 10px" shadow="always" :body-style="{ padding: '0' }">
      <div class="flex mt24">
        <el-card style="margin-left: 20px; width: 30%" shadow="never" :body-style="{ padding: '0' }">
          <div slot="header">
            <h1 style="font-weight: 600">{{ $t(`Print.InventoryInformation`) }}</h1>
          </div>
          <Table
            :summaryData="summaryData"
            summary
            :tableData="upperInstructionData.dto"
            :tableHeader="tableHeader"
            :TableHeight="100"
            :outTableHeight="80"
            @currentRow="clicktogetdata"
            :isLoading="isLoading"
          />
        </el-card>

        <el-card style="margin-left: 20px; width: 20%" shadow="never" :body-style="{ padding: '0' }">
          <div slot="header">
            <h1 style="font-weight: 600">{{ $t(`Print.DepositInformation`) }}</h1>
          </div>
          <Table
            :tableData="DepositDataTable.inDtosRough"
            :tableHeader="tableHeader3"
            :TableHeight="100"
            :outTableHeight="80"
            :isLoading="isLoading1"
          />
        </el-card>

        <el-card style="margin-left: 20px; width: 20%; margin-top: 18px" shadow="never" :body-style="{ padding: '0' }">
          <Table
            :tableData="DepositDataTable.inDtos"
            :tableHeader="tableHeader2"
            :TableHeight="100"
            :outTableHeight="80"
            @currentRow="DoubleClickForm('缴库资料数据查询', $event)"
            :isLoading="isLoading2"
          />
        </el-card>

        <el-card style="margin-left: 20px; width: 20%" shadow="never" :body-style="{ padding: '0' }">
          <div slot="header">
            <h1 style="font-weight: 600">{{ $t(`Print.IssuingInformation`) }}</h1>
          </div>
          <Table
            :tableData="DepositDataTable.outDtos"
            :tableHeader="tableHeader4"
            :TableHeight="95"
            @currentRow="DoubleClickForm('发料资料数据查询', $event)"
            :isLoading="isLoading3"
          />
        </el-card>
      </div>
      <PageModule :PageData="{ total }" @pageChange="handleSizeChange" @pageSizeChange="handleCurrentChange" />
    </el-card>

    <el-dialog class="el-dialog" v-model="dialogTableVisible" :title="stringValue">
      <Find
        :OriginalFilter="{ static: true }"
        style="margin-top: -40px"
        :searchImg="false"
        :formList="formList1"
        @Launchform="Launchform"
        @findClicked="findClicked"
      />
      <Table :tableData="deptNameTable" :tableHeader="tableHeader5" :TableHeight="95" />
    </el-dialog>
  </div>
</template>
<script lang="ts">
import { defineComponent, ref, onMounted } from 'vue'
import fileRequest from '@/utils/fileRequest'
import JMessage from '@/utils/JMessage'
import SynchronizationLoginWork from '@/utils/SynchronizationLoginWork'
export default defineComponent({
  name: 'UpperInventory'
})
</script>

<script lang="ts" setup>
import { i18n, Jzhcn } from '@/i18n'
import { VampStockInquiry } from '@/api/GeneralManager/Factoryinquiry/ShoeStorage'
import { UpperInventoryData, DepartmentalData } from '@/api/GeneralManager/Factoryinquiry/UpperInventory'
import type { UpperBodyTableData, UpperBodyTableDataParameters } from '@/api/GeneralManager/Factoryinquiry/ShoeStorage'
import type { UpperInventoryDataS, VampInventoryDataParameters, DepartmentParameter } from '@/api/GeneralManager/Factoryinquiry/UpperInventory'

const isLoading = ref(true)
const isLoading1 = ref(true)
const isLoading2 = ref(true)
const isLoading3 = ref(true)

const dialogTableVisible = ref(false)

const stringValue = ref<string>('')

const deptNameCKtl = ref<DepartmentParameter>({
  deptName: '',
  slipType: ''
})

const deptNameTable = ref()

const DoubleClickForm = async (FontSize: string, event?: any) => {
  const { deptName } = event as any
  stringValue.value = FontSize
  dialogTableVisible.value = true
  deptNameCKtl.value.deptName = deptName
  if (FontSize === '缴库资料数据查询') {
    deptNameCKtl.value.slipType = 'I'
  } else if (FontSize === '发料资料数据查询') {
    deptNameCKtl.value.slipType = 'O'
  }
  const result = await DepartmentalData(deptNameCKtl.value)
  deptNameTable.value = result
  console.log(result)
}

const formList = ref([
  {
    type: 'input',
    inputPlaceholder: '请输入指令',
    inputValue: ''
  },
  {
    type: 'input',
    inputPlaceholder: '请输入型体',
    inputValue: ''
  },
  {
    type: 'date',
    dateLabel: '收发日期',
    dateValue: ''
  },
  {
    type: 'dateSingle',
    dateLabel: '导出日期选择',
    dateValue: ''
  },
  {
    type: 'button',
    checkboxLabel: '置空',
    bgColor: '#1890FF'
  },
  // {
  //   type: 'button',
  //   checkboxLabel: '导出收发料报表'
  // },
  {
    type: 'button',
    checkboxLabel: '导出库存日报表'
  },
  {
    type: 'button',
    checkboxLabel: '导出面仓台账(号码)'
  }
])

const formList1 = ref([
  {
    type: 'input',
    inputPlaceholder: '请输入缴库部门',
    inputValue: ''
  }
])

// 库存参数
const InventoryDataParameters = ref<any>({
  lotNo: 0,
  slipDateEnd: '',
  slipDateStart: '',
  style: '',
  exportDate: ''
})

const clicktogetdata = (row: any) => {
  const { lotNo, style } = row
  InventoryDataParameters.value.lotNo = lotNo
  InventoryDataParameters.value.style = style
  isLoading1.value = true
  isLoading2.value = true
  isLoading3.value = true
  DepositData()
}

// 表格数据
const DepositDataTable = ref<UpperInventoryDataS>({
  inDtos: [],
  inDtosRough: [],
  outDtos: []
})

// 缴库资料数据获取
const DepositData = async () => {
  const result = await UpperInventoryData(InventoryDataParameters.value)
  DepositDataTable.value.inDtos = result.inDtos
  DepositDataTable.value.inDtosRough = result.inDtosRough
  DepositDataTable.value.outDtos = result.outDtos
  isLoading1.value = false
  isLoading2.value = false
  isLoading3.value = false
}

interface summaryDataType {
  index: number
  num: number | undefined
}

// 计算金额总数
const summaryData = ref<summaryDataType[]>([
  {
    index: 4,
    num: 0
  }
])

// 鞋面指令库存查询参数
const UpperInstructionParameter = ref<UpperBodyTableDataParameters>({
  color: '',
  factory: '',
  lotNo: '',
  pageNum: 1,
  pageSize: 40,
  style: ''
})

// 鞋面指令数据存储
const upperInstructionData = ref<UpperBodyTableData>({
  pageTotal: 0,
  stockSum: 0,
  dto: []
})

const ConsumableTableData = async () => {
  const result = await VampStockInquiry(UpperInstructionParameter.value)
  total.value = result.pageTotal
  upperInstructionData.value.dto = result.dto
  summaryData.value[0].num = result.stockSum
  isLoading.value = false
  DepositData()
}

// 统一调用接口
const interAceFunct = () => {
  // 鞋面入库选择指令函数
  ConsumableTableData()

  // Find下拉框数据
  // GetDepartmentData()
}

onMounted(() => {
  interAceFunct()
})

const tableHeader = ref([
  {
    label: '指令',
    prop: 'lotNo',
    width: '80'
  },
  {
    label: '型体',
    prop: 'style'
  },
  {
    label: '颜色',
    prop: 'color'
  },
  {
    label: '订单数量',
    prop: 'ordQty'
  },
  {
    label: '库存数量',
    prop: 'stockQty',
    width: '55'
  }
])

const tableHeader2 = ref([
  {
    label: '部门',
    prop: 'deptName'
  },
  {
    label: '数量',
    prop: 'qty'
  }
])

const tableHeader3 = ref([
  {
    label: '部门',
    prop: 'deptName'
  },
  {
    label: '数量',
    prop: 'qty'
  }
])

const tableHeader4 = ref([
  {
    label: '部门',
    prop: 'deptName'
  },
  {
    label: '数量',
    prop: 'qty'
  }
])

const tableHeader5 = ref([
  {
    label: '缴库日期',
    prop: 'slipDate'
  },
  {
    label: '指令',
    prop: 'lotNo'
  },
  {
    label: '缴库双数',
    prop: 'qty'
  }
])

// 分页器
const total = ref(0)

const handleSizeChange = (val: number) => {
  isLoading.value = true
  UpperInstructionParameter.value.pageNum = val
  ConsumableTableData()
}

const handleCurrentChange = (val: number) => {
  isLoading.value = true
  UpperInstructionParameter.value.pageSize = val
  ConsumableTableData()
}

const dateList = ref('')

const Launchform = (row: any) => {
  UpperInstructionParameter.value.lotNo = row[0].inputValue
  UpperInstructionParameter.value.style = row[1].inputValue
  InventoryDataParameters.value.lotNo = row[0].inputValue
  InventoryDataParameters.value.style = row[1].inputValue
  InventoryDataParameters.value.slipDateStart = row[2].dateValue[0]
  InventoryDataParameters.value.slipDateEnd = row[2].dateValue[1]
  dateList.value = row[3].dateValue
  isLoading.value = true
  if (
    InventoryDataParameters.value.lotNo !== 0 ||
    InventoryDataParameters.value.slipDateEnd !== '' ||
    InventoryDataParameters.value.slipDateStart !== '' ||
    InventoryDataParameters.value.style !== ''
  ) {
    DepositData()
  }

  ConsumableTableData()
}

const findClicked = async (find: any) => {
  if (find === '置空') {
    clearFormList1()
  }
  if (find === '导出库存日报表') {
    InventoryDataParameters.value.exportDate = dateList.value
    const res = (await fileRequest.put(`/pcFactorQuery/stitchStkDayExport`, InventoryDataParameters.value)) as any
    const link = document.createElement('a') // 利用a标签自定义下载文件名
    let blob = new Blob([res.data]) // 创建Blob对象，设置文件类型
    link.style.display = 'none'
    //设置连接
    link.href = window.URL.createObjectURL(blob)
    const FileName = decodeURI(res.headers['content-disposition'].split(`utf-8''`)[1])
    link.download = FileName //自定义文件名字
    document.body.appendChild(link)
    //模拟点击事件
    link.click()
    document.body.removeChild(link)
  }

  if (find === '导出面仓台账(号码)') {
    InventoryDataParameters.value.exportDate = dateList.value
    const res = (await SynchronizationLoginWork.post(`/pcFactorQuery/stitchStk/sizeExport`, InventoryDataParameters.value)) as any
    console.log(res)
    // if (res.code === 210) {
    //   JMessage.success(res.message)
    // } else {
    //   JMessage.error(res.message)
    // }
    // const link = document.createElement('a') // 利用a标签自定义下载文件名
    // let blob = new Blob([res.data]) // 创建Blob对象，设置文件类型
    // link.style.display = 'none'
    // //设置连接
    // link.href = window.URL.createObjectURL(blob)
    // const FileName = `面仓台账.xls`
    // link.download = FileName //自定义文件名字
    // document.body.appendChild(link)
    // //模拟点击事件
    // link.click()
    // document.body.removeChild(link)
  }
}

const clearFormList1 = () => {
  formList.value.forEach((item) => {
    if (item.type === 'input') {
      item.inputValue = ''
    }
    // Add other conditions for different form item types
  })
}
</script>

<style lang="less" scoped>
h1 {
  font-size: 14px;
}
</style>
